<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			*{
				outline: none;
			}
			#box{
				width: 900px;
				height: 60px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			按照价格查询<input type="text" class="boxin1">-<input type="text" class="boxin2">
			<button type="button" class="boxbut1">搜索</button>按照商品名称查询<input type="text" class="boxin3">
			<button type="button" class="boxbut2">查询</button>
		</div>
		<table border="1" cellspacing="0" cellpadding="1px">
			<thead>
				<th>id</th>
				<th>产品名称</th>
				<th>价格</th>
			</thead>
			<tbody class="tbody">
				
			</tbody>
		</table>
		<script type="text/javascript">
			var data = [{
				id : 1,
				pname : '小米',
				print : 3999
			},{
				id : 2,
				pname : 'oppo',
				print : 999
			},{
				id : 3,
				pname : '荣耀',
				print : 1299
			},{
				id : 4,
				pname : '华为',
				print : 1999
			},];
			var table = document.getElementsByClassName("tbody")[0];;
			var int1 = document.getElementsByClassName("boxin1")[0];
			var int2 = document.getElementsByClassName("boxin2")[0];
			var int3 = document.getElementsByClassName("boxin3")[0];
			var but1 = document.getElementsByClassName("boxbut1")[0];
			var but2 = document.getElementsByClassName("boxbut2")[0];
			// 向表格添加data数组的内容
			ab(data);
			
			function ab(obj){
				table.innerHTML ='';
				obj.forEach(function(value){
					var tr = document.createElement('tr');
					
					tr.innerHTML = "<td>"+value.id+"</td>" + "<td>"+value.pname+"</td>" + "<td>"+value.print+"</td>";
					
					table.appendChild(tr);
				});
			};
			
			but1.onclick = function(){
				var b = data.filter(function(value){
					return value.print >= int1.value && value.print <= int2.value;
				})
				
				ab(b);
			}
			
			but2.onclick = function(){
				var f = [];
				data.some(function(value){
					if(value.pname == int3.value){
						f.push(value);
					}
				})
				ab(f);
			}
		</script>
	</body>
</html>